<template>
  <div class="header-overview">
    <div class="header-overview-head">
      <div class="header_overview-wrapper">
        <div class="header_overview-title">项目概览</div>
        <div class="header_overview-extra">
          <a-button preIcon="lets-icons:clock">提醒</a-button>
          <a-button type="primary" preIcon="lets-icons:setting-alt-line">配置</a-button>
        </div>
      </div>
    </div>
  </div>
  <Row :gutter="4">
    <Col :span="18">
      <!-- 概览基础信息 -->
      <Row>
        <Col :span="24">
          <div class="overview-project-info">
            <div class="left">
              <div class="project-cover">
                <img src="../../../assets/svg/projectManager/project.svg" />
              </div>
              <div class="project-name-container">
                <span class="project-name">1124测试</span>
                <span class="project-created">张泽源 创建于 2023年11月24日</span>
              </div>
            </div>
          </div>
          <div class="overview-layout-section">
            <Row>
              <Col :span="4" :xs="12" :sm="12" :md="4" :lg="4" :xl="4">
                <div class="project-overview-info-operation">
                  <div class="project-operation-icon">
                    <img src="../../../assets/svg/projectManager/manager.svg" />
                  </div>
                  <div class="project-operation-content">
                    <div clas="project-star-inserted">张泽源</div>
                    <div class="project-tips">项目负责人</div>
                  </div>
                </div>
              </Col>
              <Col :span="4" :xs="12" :sm="12" :md="4" :lg="4" :xl="4">
                <div class="project-overview-info-operation">
                  <div class="project-operation-icon">
                    <Icon icon="ooui:user-rights-ltr" size="36" color="#1296db" />
                  </div>
                  <div class="project-operation-content">
                    <div clas="project-star-inserted">张泽源</div>
                    <div class="project-tips">项目管理者</div>
                  </div>
                </div>
              </Col>
              <Col :span="4" :xs="12" :sm="12" :md="4" :lg="4" :xl="4">
                <div class="project-overview-info-operation">
                  <div class="project-operation-icon">
                    <img src="../../../assets/svg/projectManager/startTime.svg" />
                  </div>
                  <div class="project-operation-content">
                    <div clas="project-star-inserted">11月24日</div>
                    <div class="project-tips">开始时间</div>
                  </div>
                </div>
              </Col>
              <Col :span="4" :xs="12" :sm="12" :md="4" :lg="4" :xl="4">
                <div class="project-overview-info-operation">
                  <div class="project-operation-icon">
                    <img src="../../../assets/svg/projectManager/endTime.svg" />
                  </div>
                  <div class="project-operation-content">
                    <div clas="project-star-inserted">11月25日</div>
                    <div class="project-tips">结束时间</div>
                  </div>
                </div>
              </Col>
            </Row>
          </div>
          <div class="overview-info-project-desc">
            <div class="info-desc-title">项目描述</div>
            <span class="info-desc">无描述</span>
            <a href="javascript:;" class="edit">编辑</a>
          </div>
        </Col>
      </Row>
      <!-- 项目参与人 -->
      <Row>
        <Col :span="24">
          <Card title="项目参与人" :headStyle="{ fontSize: ' 15px ' }">
            <template #extra>
              <Icon icon="ic:outline-plus" color="#666" />
              <a href="#" style="color: #666">添加成员</a>
            </template>
            <InputSearch placeholder="搜索项目参与人(按Enter搜索)" style="width: 250px" />
            <BasicTable @register="registerTable">
              <template #action="{ record }">
                <TableAction
                  :actions="[
                    {
                      label: '设置',
                      icon: 'uil:setting',
                      onClick: handleSetting.bind(null, record),
                      // auth: 'super', // 根据权限控制是否显示: 有权限，会显示
                    },
                    {
                      label: '删除',
                      icon: 'ic:outline-delete-outline',
                      onClick: handleDelete.bind(null, record),
                      // auth: 'super', // 根据权限控制是否显示: 有权限，会显示
                    },
                  ]"
                />
              </template>
            </BasicTable>
          </Card>
        </Col>
      </Row>
      <!-- 里程碑 -->
      <Row>
        <Col :span="24">
          <Card title="里程碑" :headStyle="{ fontSize: ' 15px ' }">
            <Empty description="暂无里程碑任务" />
            <div class="empty-description"> 可在任务详情中将任务标记为里程碑</div>
          </Card>
        </Col>
      </Row>
    </Col>
    <Col :span="6">
      <Row>
        <Col :span="24">
          <Card title="项目设置" :headStyle="{ fontSize: ' 15px ' }">
            <template #extra>
              <Icon icon="mingcute:edit-line" color="#666" />
              <a href="#" style="color: #666">修改</a>
            </template>
            <div class="setting-card-content">
              <Row>
                <Col :span="8" class="text-setting">需求方</Col>
                <Col :span="16">张泽源</Col>
              </Row>
              <Row style="margin-top: 15px">
                <Col :span="8" class="text-setting">项目类型</Col>
                <Col :span="16">类型A</Col>
              </Row>
              <Row style="margin-top: 15px">
                <Col :span="8" class="text-setting">项目特性</Col>
                <Col :span="16">特性A</Col>
              </Row>
              <Row style="margin-top: 15px">
                <Col :span="8" class="text-setting">项目预算</Col>
                <Col :span="16">2000元</Col>
              </Row>
              <Row style="margin-top: 15px">
                <Col :span="8" class="text-setting">项目超期时间</Col>
                <Col :span="16">5天</Col>
              </Row>
              <Row style="margin-top: 15px">
                <Col :span="8" class="text-setting">任务超期时间</Col>
                <Col :span="16">5天</Col>
              </Row>
              <Row style="margin-top: 15px">
                <Col :span="8" class="text-setting">备注</Col>
                <Col :span="16">备注信息....</Col>
              </Row>
              <Row style="margin-top: 15px">
                <Col :span="8" class="text-setting">设置工作日</Col>
                <Col :span="16">周一</Col>
              </Row>
            </div>
          </Card>
        </Col>
      </Row>
      <Row>
        <Col :span="24">
          <Card title="任务统计" :headStyle="{ fontSize: ' 15px ' }">
            <div class="task-statistics-container">
              <div class="task-statistics-item">
                <div class="item-title">任务总数</div><div class="item-count">0</div>
              </div>
              <div class="task-statistics-item">
                <div class="item-title">未开始</div><div class="item-count">0</div>
              </div>
              <div class="task-statistics-item">
                <div class="item-title">已开始</div><div class="item-count">0</div>
              </div>
              <div class="task-statistics-item">
                <div class="item-title">正常完成</div><div class="item-count">0</div>
              </div>
              <div class="task-statistics-item">
                <div class="item-title">超期完成</div><div class="item-count">0</div>
              </div>
              <div class="task-statistics-item">
                <div class="item-title">已超期</div><div class="item-count">0</div>
              </div>
              <div class="task-statistics-item">
                <div class="item-title">即将超期</div><div class="item-count">0</div>
              </div>
              <div class="task-statistics-item">
                <div class="item-title">
                  完成率
                  <Tooltip title="已完成任务/任务总数">
                    <Icon icon="ion:help-circle-outline" />
                  </Tooltip>
                </div>
                <div class="item-count" style="color: #3dd1ae">0%</div>
              </div>
              <div class="task-statistics-item">
                <div class="item-title">
                  延期率
                  <Tooltip title="延期未完成/任务总数">
                    <Icon icon="ion:help-circle-outline" />
                  </Tooltip>
                </div>
                <div class="item-count" style="color: #ff7575">0%</div>
              </div>
            </div>
          </Card>
        </Col>
      </Row>
      <Row>
        <Col :span="24">
          <Card title="关联的目标进展" :headStyle="{ fontSize: ' 15px ' }">
            <template #extra>
              <Icon icon="material-symbols:attachment" color="#666" />
              <a href="#" style="color: #666">关联</a>
            </template>
            <div class="connect-container">
              <Empty description="暂无关联目标" />
              <div class="empty-description"> 暂无关联目标，请 <a>关联</a></div>
            </div>
          </Card>
        </Col>
      </Row>
    </Col>
  </Row>
</template>
<script lang="ts" setup>
  import { Icon } from '/@/components/Icon';
  import { Row, Col, Card, InputSearch, Tooltip, Empty } from 'ant-design-vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getDetailColumns } from './tableData';
  const [registerTable] = useTable({
    columns: getDetailColumns(),
    actionColumn: {
      width: 200,
      fixed: 'right',
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });
  const handleSetting = (record: Recordable) => {
    console.log('设置', record);
  };
  const handleDelete = (record: Recordable) => {
    console.log('删除', record);
  };
</script>
<style lang="less" scoped>
  ::v-deep(.ant-page-header) {
    height: 57px !important;
    padding: 0 24px !important;
  }

  .header-overview {
    width: 100%;
    border: 1px solid #f0f0f0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgb(0 0 0 / 85%);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: tnum;
    position: relative;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s;

    .header-overview-head {
      min-height: 48px;
      margin-bottom: -1px;
      padding: 0 24px;
      color: rgb(0 0 0 / 85%);
      font-weight: 500;
      font-size: 16px;
      background: transparent;
      border-bottom: 1px solid #f0f0f0;
      border-radius: 2px 2px 0 0;

      .header_overview-wrapper {
        display: flex;
        align-items: center;

        .header_overview-title {
          display: inline-block;
          flex: 1;
          padding: 16px 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .header_overview-extra {
          float: right;
          width: 200px;
          display: flex;
          justify-content: space-between;
          margin-left: auto;
          padding: 16px 0;
          color: rgb(0 0 0 / 85%);
          font-weight: normal;
          font-size: 14px;
        }
      }
    }
  }

  .overview-project-info {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 24px 28px 6px;
    background-color: #fff;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border: 1px solid #eee;
    border-bottom: none;

    .left {
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      max-width: 93%;

      .project-cover {
        width: 44px;
        height: 44px;
        background-size: cover;
        background-position: center center;
        border-radius: 4px;
        margin-right: 12px;
      }

      .project-name-container {
        max-width: 92%;

        .project-name {
          width: 100%;
          display: inline-block;
          vertical-align: middle;
          color: #333;
          font-weight: 500;
        }

        .project-created {
          color: #999;
          font-size: 12px;
        }
      }
    }
  }

  .overview-layout-section {
    border-top: none;
    border-radius: 2px;
    width: 100%;
    display: block;
    padding: 24px 28px;
    background-color: #fff;

    .project-overview-info-operation {
      margin-left: 0;
      min-width: 126px;
      display: inline-flex;
      cursor: pointer;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      position: relative;
      padding-right: 20px;

      .project-operation-content {
        margin-left: 10px;
        position: relative;

        .project-tips {
          color: #aaa;
          font-size: 12px;
        }
      }
    }
  }

  .overview-info-project-desc {
    padding: 24px 28px;
    border-bottom: 1px solid #eee;
    background-color: #fff;

    .info-desc-title {
      color: #999;
      margin-bottom: 12px;
    }

    .info-desc {
      color: #999;
      margin-bottom: 12px;
      display: block;
      white-space: pre-line;
      word-break: break-all;
    }

    .edit {
      color: #aaa;
      cursor: pointer;
    }
  }

  .empty-description {
    color: #999;
    line-height: 100%;
    font-size: 14px;
    margin-top: 14px;
    text-align: center;
  }

  .setting-card-content {
    padding: 10px 20px 20px;

    .text-setting {
      color: #666;
    }
  }

  .task-statistics-container {
    width: 100%;
    display: block;
    padding: 24px 28px;

    .task-statistics-item {
      width: 33.3%;
      display: inline-block;
      margin-bottom: 20px;
      cursor: pointer;

      .item-title {
        color: #999;
        display: flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
      }

      .item-count {
        font-size: 24px;
        color: #2a344b;
        font-family: lcletter;
      }
    }
  }

  .connect-container {
    padding: 24px 28px;
  }
</style>
